<template>
    <div class="detail">
        <div>
           <template v-if="lgc">
                <a>欢迎,{{ lgc }}</a>
           </template>
           <template v-else>
               <router-link :to="{name:'login'}">去登录</router-link>
           </template>
        </div>
        <div class="goods-info" v-if="proInfo">
            <img class="img" :src="proInfo.goodsImg" alt="">
            <p class="name">{{ proInfo.goodsName }}</p>
            <p class="price">{{ proInfo.goodsPrice }}</p>
            <p>
                <button @click="addToShoppingCar">加入购物车</button>
            </p>
        </div>


        <!-- 查看类似商品 => 都是跳转同一个路由页面,只是hash值不一样 (当前组件会被复用) => hash值改变不会触发视图更新 => 导致数据虽然改变但是视图并没有更新  -->
        <!-- 解决方法 => 虽然视图没变 但是导航中的数据变了 => $route  => 可以监听$route是否发送改变 -->
        <div class="more">
            <h3>查看类似商品</h3>
            <router-link to="/detail/100010022425">原笔记本</router-link> | 
            <router-link to="/detail/100032149194">笔记本1</router-link> |
            <router-link to="/detail/100030588242">笔记本2</router-link> |
        </div>

        <br>

        <router-link to="/list">返回商品列表</router-link>

    </div>
</template>

<script>

import { searchGoodsByGoodsIdAPI } from "@/api/goods.js";

// 如果不设置name 默认会把index.vue => index作为组件名(常用,可能会重复)  => 需要自定义一个name => 大驼峰
export default {
    name: "DetailView",
    data() {
        return {
            proid: null,
            proInfo: null,
            lgc:null,
            enterTime:null,
            leaveTime:null,
        }
    },
    methods: {
        async searchGoodsByGoodsId() {
            try {
                var res = await searchGoodsByGoodsIdAPI({ gid: this.proid });
                console.log("数据请求成功", res);

                this.proInfo = res.data;

            } catch (err) {
                console.log(err);
            }

        },
        getLoginNick(){
            this.lgc = localStorage.getItem("lgc") || null;
        },
        addToShoppingCar(){
            console.log("准备加入购物车");
            
            // 加入购物车之前需要先判断用户是否登录?
            // 已登录 => 调用接口 加入购物车
            // 未登录 => 去登录 => 登录成功再回来

            if(this.lgc){
                console.log("买买买");
            }else{
                // this.$router.push("/login")
                this.$router.replace({name:"login",query:{ReturnUrl:this.$route.fullPath}})
            }

        }
    },
    watch:{
        // "$route":function(newVal,oldVal){
        //     console.log("监听到当前路由数据改变");
        //     console.log(1,newVal);
        //     console.log(2,oldVal);

        //     // a. 监听到当前路由数据改变 => 刷新页面
        //     // location.reload();

        //     // b. 监听到当前路由数据改变 => 将proid赋值为的id => 在重新请求
        //     this.proid = this.$route.params.proid;
        //     this.searchGoodsByGoodsId();
        // },
        // "$route.params.proid":function(newVal,oldVal){
        //     console.log("监听到当前路由proid改变");
        //     console.log(1,newVal);
        //     console.log(2,oldVal);

        //     // a. 监听到当前路由数据改变 => 刷新页面
        //     // location.reload();

        //     // b. 监听到当前路由数据改变 => 将proid赋值为的id => 在重新请求
        //     this.proid = this.$route.params.proid;
        //     this.searchGoodsByGoodsId();
        // }
    },
    beforeMount(){
        console.log("挂载之前");
    },
    mounted() {
        console.log("挂载完毕");
        
        // this.$route => 所有组件均可以访问 => 当前路由信息
        // this.$router => 所有组件均可以访问 => 所有路由组成的路由实例
        // console.log("route", this.$route);
        // console.log("router",this.$router);
        
        // 获取动态路径参数
        // console.log("动态路径参数", this.$route.params);
        // console.log("proid", this.$route.params.proid);
        this.proid = this.$route.params.proid;
        
        this.getLoginNick();
        this.searchGoodsByGoodsId();
    },
    // 组件内路由守卫
    // beforeRouteEnter  => 页面进入之前被调用 在路由跳转之后,组件创建之前被调用(组件还未被创建 -> 也就没有初始化)  
    // 注意: 此时不能访问 this(当前组件/实例)
    // beforeRouteEnter 常用语埋点操作 (页面驻留时间 )


     // beforeRouteLeave  =>  页面离开之前被调用
    beforeRouteEnter(to,from,next){  // 从其他页面 跳到 当前页
        console.log("beforeRouteEnter");
        console.log("to",to);
        console.log("from",from);
        console.log("this",this); // 此时不能访问 this(当前实例)
        // next();

       

        // next可以接收一个回调函数作为参数 (类似 nextTick),此函数会在组件从虚拟DOM渲染到真实dom之后执行(此时可以通过形参访问当前实例 )
        next((vm)=>{
            console.log("回调函数执行了",vm);
            vm.enterTime = Date.now(); // 获取当前时间对应毫秒数
        })
    },
    async beforeRouteUpdate(to, from, next){
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
        console.log("beforeRouteUpdate","路由改变,但是组件被复用");
        console.log("to",to);
        console.log("from",from);

        if(to.params.proid != from.params.proid){ // proid改变了
            this.proid = to.params.proid;
            await this.searchGoodsByGoodsId();
            next();
        }else{
            next();
        }

        

    },
    beforeRouteLeave(to,from,next){  // 从当前页 跳到 其他页
        console.log("beforeRouteLeave");
        console.log("to",to);
        console.log("from",from);
        console.log("this",this); // 此时不能访问 this(当前实例)

        this.leaveTime = Date.now(); // 获取当前时间对应毫秒数

        if(this.leaveTime - this.enterTime >= 10000){
            console.log("任务完成");
            next();
        }else{
            if(confirm("你的任务还未完成,是否继续")){
                next(false);
            }else{
                next();
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-info {
    font-size: 12px;
    padding: 0 0.2rem;

    .img {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 0.36rem;
    }
}

.more{
    margin-top: 10px;
    padding: 0 0.2rem;
}
</style>